<!--
 * @Author: WeijianXu weijian.xu@unidt.com
 * @Date: 2024-04-28 15:28:14
 * @LastEditors: WeijianXu weijian.xu@unidt.com
 * @LastEditTime: 2024-04-29 15:07:13
 * @FilePath: \echarts5-test\src\App.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup>
import { onMounted, ref, watch, onUnmounted } from 'vue';
import echarts from '@/echarts-modules.js';

const props = defineProps({
  option: {
    type: Object,
    required: true,
  }
})

const echartsRef = ref(null);
let instance = ref(null);

watch(
  () => props.option,
  (newOption, oldOption) => {
    // 修复：当option为空时，不执行setOption方法
    if (newOption) {
      // 不合并 option ，直接使用最新的 option
      instance?.setOption(newOption, true);
    }
  },
);

function resize() {
  // 监听页面的 resize 事件获取浏览器大小改变的事件，然后调用 echartsInstance.resize 改变图表的大小
  instance.resize();
}

// 基于准备好的dom，初始化echarts实例
onMounted(() => {
  instance = echarts.init(echartsRef.value);
  instance.setOption(props.option);
  window.addEventListener('resize', resize);
});
onUnmounted(() => {
  window.removeEventListener('resize', resize);
  // 图表容器被销毁之后，需要手动销毁实例
  // 防止内存泄漏
  instance.dispose();
});

defineExpose({
  getInstance: () => instance,
});
</script>

<template>
  <div ref="echartsRef" class="echarts"></div>
</template>

<style lang="scss">
.echarts {
  width: 100%;
  height: 100%;
}
</style>
